<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .sessionBox {
      width: 400px;
      border: 2px dashed yellow;
      padding: 50px 20px;
      background-color: yellowgreen;
    }

    dt,
    dd {
      display: flex;
      justify-content: space-around;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <div id="box">
    <!-- 利用{{}}渲染 -->
    <h1>{{msg}}{{num}}</h1>
    <!-- v-once 只渲染原始的数据 很少用 -->
    <h2 v-once>{{msg}}</h2>
    <!-- v-html 相当于innerHtml -->
    <div v-html="marquee"></div>

    <!-- 重要：行内属性  按F12去看-->
    <input v-bind:type="inputType"></input>
    <div v-bind:class="newclass"></div>
    <!-- 简写 -->
    <div :class="newclass"></div>

    <hr>


    <!-- 以下判断语句是一整块的东西，不能再里面添加额外的东西，例如div -->
    <!-- 这里只显示登录这一块东西，因为它是true -->
    <fieldset v-if="login">
      <legend>登录</legend>
      <input placeholder="账号">
      <input placeholder="密码">
    </fieldset>

    <fieldset v-else>
      <legend>注册</legend>
      <input placeholder="账号">
      <input placeholder="密码">
    </fieldset>


    <!-- 如果要重新渲染整体结构,用key for一定要绑定,if看情况 -->
    <br><br>

    <!-- v-show  ture:显示 false:隐藏(display:none)-->
    <h1 v-show="login">11111111</h1>
    <h1 v-show="!login">22222222</h1>
    <!-- @:代表添加事件,click为点击  上面的fieldset也会随之改变-->
    <h2 @click="change">点击切换</h2>


    <br><br><br>



    <div class="sessionBox">
      <button @click="sessionOrder">时间排序</button>
      <dl>
        <dt>
          <span>场次</span>
          <span>状态</span>
        </dt>
        <!-- 这里的两个index是一样的  这里已经有三条数据了(因为下面三条数据了)  key:因为-->
        <dd v-for="(item,index) in sessionList" :key="index">

          <span>
            {{new Date(Number(item.start_time)).toLocaleTimeString().slice(2,-3)}}
            -
            {{new Date(Number(item.end_time)).toLocaleTimeString().slice(2,-3)}}
          </span>
          <span>可预约</span>

        </dd>

      </dl>


    </div>


  </div>






  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({

      el: "#box",//el:获取id为box的元素
      data: {//data:vue的数据
        msg: "111111",//原始数据
        num: 1,
        marquee: `<marquee>走马灯标签</marquee>`, //也可以用""
        inputType: "color",//
        newclass: "lala",//
        login: true,
        //接口数据
        sessionList: [{
          "id": 18,
          "start_time": "1633089600000",
          "end_time": "1633096800000",
          "is_appointment": 1,
          "all_num": 50,
          "appointment_num": 1,
          "time_id": 9
        },
        {
          "id": 17,
          "start_time": "1633078800000",
          "end_time": "1633086000000",
          "is_appointment": 1,
          "all_num": 50,
          "appointment_num": 1,
          "time_id": 9
        },
        {
          "id": 16,
          "start_time": "1633060800000",
          "end_time": "1633068000000",
          "is_appointment": 1,
          "all_num": 50,
          "appointment_num": 3,
          "time_id": 9
        }
        ]

      },
      methods: {
        change() {
          this.login = !this.login;
        },
        sessionOrder() {
          this.sessionList = this.sessionList.sort((a, b) => {
            return a.start_time - b.start_time;
          })
        }
      }
    })
    console.log(app);//打印可以看出里面的东西
    app.msg = "123";//利用暴露的方法修改其数据
    console.log(app.msg);//"123"
    console.log(app.num);//1
  </script>

</body>

</html>